<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/resources/css/nav.css">
<title>宠物狗周边</title>
 <style type="text/css">
        .message{
            width: 940px;
            margin: 5px auto;
            text-align: center;
            overflow: hidden;

        }
        .message h2{
            width: 180px;
            float: left;
            color: #e61b1b;
            margin-left: 90px;
            font-size: 16px;
        }
        .message a{
            float: right;
            font-size: 16px;
        }
        #main{height: 900px;
            margin: 0px auto;
            width: 1200px;}
        .content{
            float: right;
            width: 970px;}
        .side{
            margin-top: 10px;
            float: left;
            width:225px;
        }
        .cont{
            border:#C0C0C0 1px solid;
            margin: 4px;
            overflow: hidden;
        }
        .cont h1{
            text-align:left;
            height:25px;
            line-height:25px;
            font-weight:500;
            border-left:#FF4200 4px solid;
            color:#21241d;
            padding-left: 10px;
            font-size: 24px;
            margin-top: 5px;

        }

        .search ul li{
            margin: 10px;

        }
        .keyword input{
            width: 135px;
            height: 20px;
        }
        .sPrice input{
            width: 35px;
            height: 20px;
        }
        .submit{
            text-align: center;
        }
        #btn-search{
            height: 25px;
            width: 39px;
            padding: 4px;
            margin-left: 5px;
            line-height: 10px;
            text-align: center;
            background-color: #F52727;
            color: #FFF;
            border:0;
            font-size: 14px;
            cursor: pointer;
        }

        .choose{
           border-bottom: 0px;

        }
        .choose h1{
            margin-top: 5px;
        }
        .choose ul{
            padding: 10px 15px 10px 15px;
        }
        .choose ul li a{
            font-size: 16px;
            line-height: 170%;
            color: #333;
            letter-spacing:2px;

        }
        .choose ul li a:hover{
             color: #ff3333;
        }

        .itemsLine{
            width: 985px;
            margin-top: 15px;
            margin-left: 1px;
        }
        .itemsLine h2{
            font-size: 20px;
            margin-left: 400px;
            margin-top: 300px;
        }
        .item{
            display: inline-block;
            margin-right: 8px;
            margin-top: 8px;
            border-bottom: 1px  dashed #aaa;
        }
        .photo{
            width: 235px;
            height: 200px;
        }
        .detail{
            overflow: hidden;
            width: 130px;
            margin-top: 20px;
            float: left;
            height: 20px;
        }
        .detail a{
            color: #777777;
            font-size: 16px;
            width: 130px;
            height: 20px;
            overflow: hidden;
        }
        .add{
            overflow: hidden;
            margin-top: 10px;
        }
        .addcart{
            width: 80px;
            float: right;
            background-color: #3185e8;
            padding: 8px;
            text-align: center;
            color: #fff;
        }
        .goods{
            padding-top: 10px;
            overflow: hidden;
        }
        .symbol,.price{
            color: #B11000;
            font-family:verdana,arial;
            font-size: 14px;
        }
        .sales{
            float: right;
            padding-bottom: 5px;
        }
        .sales h4{
            color: #999;
            float: right;
        }
        .sales h3{
            color: #3d3d3d;
            float: right;
        }

    </style>
</head>
<body>
<!-- 页面导航 -->
<jsp:include page="../head/site-topbar.jsp"/>
<jsp:include page="../head/header.jsp"/>
<div id="main">
    <div class="side">
        <div class="cont"><h1>筛选条件</h1>
            <form action="/petGood/searchgoods" method="get" onsubmit="return check(this)" id="myFormid">
                <div class="search">
                    <ul>
                        <li class="keyword"><label for="keyword">关键字：</label><input type="text" name="keyword"></li>
                        <li class="sPrice">
                            <label for="sPrice">价格：</label>
                            <input type="text" value="" name="lowPrice" id="lowPrice"> 到
                            <input type="text" value="" name="highPrice" id="highPrice">
                            <input type="submit" value="查找" id="btn-search" />
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="cont">
            <div class="choose">
                <h1>种类</h1>
                <ul>
                    <li><a href="/petGood/choose?kindsId=101">狗狗零食</a></li>
                    <li><a href="/petGood/choose?kindsId=102">狗狗玩具</a></li>
                    <li><a href="/petGood/choose?kindsId=103">狗狗洗护</a></li>
                    <li><a href="/petGood/choose?kindsId=104">狗狗美食</a></li>
                    <li><a href="/petGood/choose?kindsId=105">狗狗美装</a></li>
                    <li><a href="/petGood/choose?kindsId=106">狗狗窝垫</a></li>
                    <li><a href="/petGood/choose?kindsId=107">狗狗食盆</a></li>                  
                </ul>
            </div>      

        </div>
    </div>
    <div class="content">
        <div class="itemsLine">
        <c:if test="${empty petGoods}">
        	<h2>暂无任何信息</h2>
        </c:if>
        <c:if test="${!empty petGoods}">
        	<c:forEach var="petGood" items="${petGoods}">
	            <div class="item">
	                <div class="photo"><a href="/petGood/${petGood.goodId}"><img src="/resources/images/${petGood.goodImg}" alt="" width="235" height="200"></a></div>
	                <div class="detail"><a href="/petGood/${petGood.goodId}">${petGood.goodName}</a></div>
	                <div class="add">
	                    <a href="/buy/addOne?goodId=${petGood.goodId}"><h1 class="addcart">加入购物车</h1></a>
	                </div>
	                <div class="goods">
	                    <a href="/buy?action=add&goodId=${petGood.goodId}"><span class="symbol">¥ </span><span class="price">${petGood.price}</span></a>
	                    <div class="sales"><a href="/petGood/${petGood.goodId}"><h3>${petGood.sales}</h3><h4>销售量：</h4></a></div>
	                </div>
	            </div>
        	</c:forEach>
        </c:if>
              
        </div>
    </div>
</div>
<jsp:include page="../head/end.jsp"/>
<script src="/resources/js/jquery-3.1.1.min.js"></script>
<script src="/resources/js/myheader.js"></script>
<script>
function check(form) {   
    
    if(form.keyword.value == ""){
        if(form.lowPrice.value == ""&&form.highPrice.value == ""){
            alert("请输入筛选条件"); 
            return false; 
        }else if(form.lowPrice.value != ""&&form.highPrice.value == ""){
            if(!isNumber(form.lowPrice.value)){
                alert("最低价格不正确"); 
                return false; 
            }
            $("#myFormid").attr("action","/petGood/searchBylowPrice");
        }else if(form.lowPrice.value == ""&&form.highPrice.value != ""){
            if(!isNumber(form.highPrice.value)){
                alert("最高价格不正确"); 
                return false; 
            }
            $("#myFormid").attr("action","/petGood/searchByhighPrice");
        }else{
            if (parseInt(form.lowPrice.value) > parseInt(form.highPrice.value)) {       
                alert("最高价格应高于最低价格"); 
                return false;  
            }
            if(!isNumber(form.lowPrice.value)||!isNumber(form.highPrice.value)){
                alert("最高价格或最低价格不正确"); 
                return false; 
            }
        }

    }else{
        if(form.lowPrice.value == ""&&form.highPrice.value == ""){
            $("#myFormid").attr("action","/petGood/searchgoodsByName");
        }else if(form.lowPrice.value != ""&&form.highPrice.value == ""){
            if(!isNumber(form.lowPrice.value)){
                alert("最低价格不正确"); 
                return false; 
            }
            $("#myFormid").attr("action","/petGood/searchByNameAndLowPrice");
        }else if(form.lowPrice.value == ""&&form.highPrice.value != ""){
            if(!isNumber(form.highPrice.value)){
                alert("最高价格不正确"); 
                return false; 
            }
            $("#myFormid").attr("action","/petGood/searchByNameAndHighPrice");
        }else{
            if (parseInt(form.lowPrice.value) > parseInt(form.highPrice.value)) {       
                alert("最高价格应高于最低价格"); 
                return false;  
            }
            if(!isNumber(form.lowPrice.value)||!isNumber(form.highPrice.value)){
                alert("最高价格或最低价格不正确"); 
                return false; 
            }
        }
    }
    return true;    
}
function isNumber(value) {
    var patrn = /^(-)?\d+(\.\d+)?$/;
    if (patrn.exec(value) == null || value == "") {
        return false
    } else {
        return true
	}
}
</script>
</body>
</html>